<template>
  <div class="main-content">
    <h2 style="margin-bottom:20px;">订单管理 - 订单列表</h2>
    <el-form :inline="true" :model="searchForm" class="form-content">
      <el-form-item label="客户名称">
        <el-input v-model="searchForm.customer" placeholder="请输入客户名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="产品">
        <el-input v-model="searchForm.product" placeholder="请输入产品名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="交付状态">
        <el-select v-model="searchForm.status" placeholder="全部" clearable>
          <el-option label="未交付" value="未交付" />
          <el-option label="已交付" value="已交付" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button type="success" @click="openDialog()">新增订单</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="dataList" style="width: 100%;margin-top:20px;" border>
      <el-table-column prop="customer" label="客户名称" align="center" />
      <el-table-column prop="product" label="产品" align="center" />
      <el-table-column prop="status" label="交付状态" align="center" />
      <el-table-column label="操作" align="center" width="180">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="goDetail(scope.row.id)">详情</el-button>
          <el-button type="danger" size="mini" @click="deleteHandler(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top:20px;"
      :current-page="pageIndex"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, prev, pager, next, jumper"
      @current-change="currentChangeHandle"
      @size-change="sizeChangeHandle"
      :page-sizes="[10, 20, 50]"
      background
    />
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px">
      <el-form :model="form" ref="form" label-width="80px">
        <el-form-item label="客户名称" prop="customer">
          <el-input v-model="form.customer" placeholder="请输入客户名称" />
        </el-form-item>
        <el-form-item label="产品" prop="product">
          <el-input v-model="form.product" placeholder="请输入产品名称" />
        </el-form-item>
        <el-form-item label="交付状态" prop="status">
          <el-select v-model="form.status" placeholder="请选择交付状态">
            <el-option label="未交付" value="未交付" />
            <el-option label="已交付" value="已交付" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getOrderList, addOrder, updateOrder, deleteOrder } from '@/utils/orderLocal';
export default {
  data() {
    return {
      searchForm: { customer: '', product: '', status: '' },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dialogVisible: false,
      dialogTitle: '新增订单',
      form: { id: '', customer: '', product: '', status: '未交付' },
    };
  },
  created() {
    this.getDataList();
  },
  methods: {
    search() {
      this.pageIndex = 1;
      this.getDataList();
    },
    getDataList() {
      let list = getOrderList();
      if (this.searchForm.customer) list = list.filter(i => i.customer.includes(this.searchForm.customer));
      if (this.searchForm.product) list = list.filter(i => i.product.includes(this.searchForm.product));
      if (this.searchForm.status) list = list.filter(i => i.status === this.searchForm.status);
      this.totalPage = list.length;
      const start = (this.pageIndex-1)*this.pageSize;
      this.dataList = list.slice(start, start+this.pageSize);
    },
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.getDataList();
    },
    goDetail(id) {
      this.$router.push({ path: '/order/detail', query: { id } });
    },
    openDialog(row) {
      if (row) {
        this.dialogTitle = '编辑订单';
        this.form = { ...row };
      } else {
        this.dialogTitle = '新增订单';
        this.form = { id: '', customer: '', product: '', status: '未交付' };
      }
      this.dialogVisible = true;
    },
    onSubmit() {
      if (this.form.id) {
        updateOrder(this.form);
        this.$message.success('修改成功');
      } else {
        addOrder(this.form);
        this.$message.success('新增成功');
      }
      this.dialogVisible = false;
      this.getDataList();
    },
    deleteHandler(id) {
      this.$confirm('确定要删除该订单吗？', '提示', { type: 'warning' }).then(() => {
        deleteOrder([id]);
        this.getDataList();
        this.$message.success('删除成功');
      });
    },
  }
}
</script> 